<template>
    <div class="app-container">
        <!-- 表格-条件筛区域  -->
        <div class="filter-container">
            <el-input placeholder="请输入姓名" v-model="searchParam.SEARCH_LIKE_name" style="width: 200px;"
                      class="filter-item" @keyup.enter.native="handleFilter"/>
            <el-input placeholder="请输入身份证号" v-model="searchParam.SEARCH_LIKE_card_number" style="width: 200px;"
                      class="filter-item" @keyup.enter.native="handleFilter"/>
            <el-input placeholder="请输入手机号" v-model="searchParam.SEARCH_LIKE_mobile" style="width: 200px;"
                      class="filter-item" @keyup.enter.native="handleFilter"/>
            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter"> 搜索</el-button>
            <el-button class="filter-item" type="default" icon="el-icon-search" @click="searchReset"> 重置</el-button>
<!--            <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit"-->
<!--                       @click="handleCreate"> 新增-->
<!--            </el-button>-->
        </div>

        <!-- 表格-内容区域 -->
        <el-table :key="tableKey" v-loading="listLoading" :data="tableList" border fit highlight-current-row
                  style="width: 100%;">
            <el-table-column v-for="column in columns" :key="column.prop"
                             :align="column.align?column.align:'center'"
                             :fixed="column.fixed"
                             :formatter="column.formatter"
                             :label="column.label"
                             :min-width="column.minWidth"
                             :prop="column.prop"
                             :sortable="column.sortable"
                             :type="column.type" :width="column.width">
                <template slot-scope="scope">
                    <!-- 行内显示图片 -->
                    <img v-if="column.imgFlag==true"
                         :src=" scope.row[column.prop].indexOf('http://') >-1 ?  scope.row[column.prop] : ( CMBASE.baseFileContext + scope.row[column.prop] ) "
                         alt="" class="img" height="60" width="60"/>
                    <!-- 行内显示开关按钮 -->
                    <el-switch v-else-if="column.switchFlag==true" v-model="scope.row[column.prop]" :active-value="1"
                               :inactive-value="0" disabled></el-switch>
                    <!-- 行内显示tag标签 -->
                    <span v-else-if="column.tagFlag==true">
                        <span v-for="item in column.tagFormatter" :key="item.value">
                            <el-tag v-if="item.value==scope.row[column.prop]" :type="item.type">{{item.text}}</el-tag>
                        </span>
                    </span>
                    <!-- 行内格式自定义 -->
                    <span v-else-if="column.formatter"> {{column.formatter(scope.row)}}</span>
                    <!--默认显示文本-->
                    <span v-else>{{scope.row[column.prop]}}</span>
                </template>
            </el-table-column>

            <el-table-column align="center" class-name="small-padding" label="操作" width="240">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="withdrawApply(scope.row)"> 审核 </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 表格-页脚区域 -->
        <pagination v-show="tableTotal>0" :limit.sync="pageRequest.pageSize" :page.sync="pageRequest.pageNum" :total="tableTotal" @pagination="getList"/>

        <!--新增编辑界面-->
        <el-dialog :close-on-click-modal="false" :title="dateFormName" :visible.sync="dialogFormVisible" top="5vh" width="45%">
            <el-form ref="dataForm" :model="dataForm" :rules="dataFormRules" disabled label-width="140px" style="width: 80%">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="dataForm.name" auto-complete="off" placeholder="请输入姓名"/>
                </el-form-item>
                <el-form-item label="用户id" prop="userId">
                    <el-input v-model="dataForm.userId" auto-complete="off" placeholder="请输入用户id"/>
                </el-form-item>
                <el-form-item label="手机号" prop="mobile">
                    <el-input v-model="dataForm.mobile" auto-complete="off" placeholder="请输入手机号"/>
                </el-form-item>
                <el-form-item label="身份证号" prop="cardNumber">
                    <el-input v-model="dataForm.cardNumber" auto-complete="off" placeholder="请输入身份证号"/>
                </el-form-item>
                <el-form-item label="证件类型" prop="certType">
                    <el-select v-model="dataForm.certType" placeholder="请选择证件类型">
                        <el-option label="身份照" :value="1"></el-option>
                        <el-option label="护照" :value="2"></el-option>
                        <el-option label="港澳台" :value="3"></el-option>
                        <el-option label="其他" :value="4"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="证件照正面" prop="certPositive">
                    <cm-upload v-model="dataForm.certPositive"></cm-upload>
                </el-form-item>
                <el-form-item label="证件照反面" prop="certReverse">
                    <cm-upload v-model="dataForm.certReverse"></cm-upload>
                </el-form-item>
                <el-form-item label="审核状态" prop="state">
                    <el-select v-model="dataForm.state" placeholder="请选择审核状态">
                        <el-option label="待审核" :value="0"></el-option>
                        <el-option label="通过" :value="1"></el-option>
                        <el-option label="拒绝" :value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="dataForm.remark" auto-complete="off" placeholder="请输入备注"/>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button  :loading="editLoading" size="mini"
                           type="primary" @click.native="handleApply(dataForm.id)">拒绝
                </el-button>
                <el-button  :loading="editLoading" size="mini"
                           type="primary" @click.native="saveFormData(dataForm.id)">通过
                </el-button>
                <el-button size="mini" @click.native="closeDialog()">关闭
                </el-button>
            </div>
        </el-dialog>

        <el-dialog :title="checkName" :visible.sync="getCheckVisible">
            <el-form ref="checkForm" :model="checkForm">
                <el-form-item label="审核备注" prop="remark">
                    <el-input v-model="checkForm.remark" autocomplete="off" placeholder="请输入审核备注"
                              style="width: 80%" type="textarea"></el-input>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button size="mini" type="primary" @click.native="handleSubmit()">提交</el-button>
            </div>
        </el-dialog>

    </div>
</template>
<script>
import Pagination from '@/components/Pagination' // 分页栏信息
import { getJdVerifyList, jdVerifyCheck} from '@/api/modules/appUser'
import {applyLive} from "@/api/modules/live";
import CmUpload from '@/components/Upload'

export default {
    name: 'verify',
    components: {
        Pagination,
        CmUpload
    },
    directives: {   },
    filters: { },
    data() {
        return {
            tableKey: 0,
            tableList: [],//表格数据源
            tableTotal: 0,//表格总条数数据
            listLoading: true,
            pageRequest: { pageNum: 1, pageSize: 10, },
            searchParam:{},
            dialogFormVisible: false,//默认不显示弹出框
            dateFormName: "审核",
            editLoading: false,//保存表单时loading框
            columns: [
                // {prop: 'id',  label: '',  sortable:false  },
                {prop: 'name',  label: '姓名',  sortable:false  },
                {prop: 'cardNumber',  label: '身份证号',  sortable:false  },
                {prop: 'mobile',  label: '手机号',  sortable:false  },
                {
                    prop: 'certType', label: '证件类型', sortable: false, tagFlag: true,
                    tagFormatter: [
                        {text: '身份照', value: 1, type: 'warning'},
                        {text: '护照', value: 2, type: 'success'},
                        {text: '港澳台', value: 3, type: 'error'},
                        {text: '其他', value: 4, type: 'danger'}
                    ]
                },
                {prop: 'certPositive', label: '证件照正面', sortable: false, imgFlag: true},
                {prop: 'certReverse', label: '证件照反面', sortable: false, imgFlag: true},
                {
                    prop: 'state', label: '审核状态', sortable: false, tagFlag: true,
                    tagFormatter: [
                        {text: '待审核', value: 0, type: 'warning'},
                        {text: '通过', value: 1, type: 'success'},
                        {text: '拒绝', value: 2, type: 'error'}
                    ]
                },
                {prop: 'remark',  label: '审核备注',  sortable:false  },

            ],
            fileList: [],
            // 新增编辑界面数据
            dataForm: {},
            //表单检验规则
            dataFormRules: {
                // id: [ { required: true, message: '请输入', trigger: 'blur' } ],
                // userId: [ { required: true, message: '请输入用户id', trigger: 'blur' } ],
                // cardId: [ { required: true, message: '请输入银行卡id', trigger: 'blur' } ],
                // createTime: [ { required: true, message: '请输入创建时间', trigger: 'blur' } ],
                // amount: [ { required: true, message: '请输入提现金额', trigger: 'blur' } ],
                // et: [ { required: true, message: '请输入审核时间', trigger: 'blur' } ],
                // eu: [ { required: true, message: '请输入审核人', trigger: 'blur' } ],
                // applyState: [ { required: true, message: '请输入审核状态 0待审核1通过2拒绝', trigger: 'blur' } ],
                // remark: [ { required: true, message: '请输入备注', trigger: 'blur' } ],
            },

            //审核信息
            verifyId: '',
            checkName: '审核备注',
            getCheckVisible: false, // 属性值列表页 隐藏
            // 审核备注数据
            checkForm: {},
        }
    },
    methods: {
        //获取表格数据
        getList() {
            this.listLoading = true
            //【API请求】----获取表格列表数据
            getJdVerifyList(this.pageRequest).then(response => {
                response = response.result
                this.tableList = response.list
                this.tableTotal = response.total
                this.listLoading = false;
            }).catch((res) => {
                this.$message({  message: res.msg, type: 'error' })
            })
        },
        //表格数据筛选
        handleFilter() {
            this.pageRequest.searchParam = this.searchParam
            this.getList()
        },
        //【按钮点击】--- 弹出编辑表单
        withdrawApply(row) {
            this.operation = false;
            this.dataForm = Object.assign({}, row)
            //显示编辑菜单
            this.dialogFormVisible = true
            this.$nextTick(() => {
                this.$refs['dataForm'].clearValidate()
                this.editLoading = false;
            })
        },
        //保存表单数据
        saveFormData(id) {
            this.verifyId = id
            const applyState = 1
            const params = {
                state: applyState,
                id: id,
                remark: "审核通过"
            }
            jdVerifyCheck(params).then(response => {
                this.dialogFormVisible = false
                this.getList()// 重新获取表格数据
                this.$notify({title: '成功', message: '已审核通过', type: 'success', duration: 2000})
            }).catch(() => {
                this.dialogFormVisible = false
                this.getList()
            })
        },
        //点击拒绝， 输入拒绝原因
        handleApply(id) {
            this.verifyId = id
            this.getCheckVisible = true
            this.dialogFormVisible = false
        },
        //点击提交，处理拒绝申请
        handleSubmit() {
            const applyState = 2
            const params = {
                state: applyState,
                id: this.verifyId,
                remark: this.checkForm.remark
            }
            // 【API请求】----文章审核 拒绝
            jdVerifyCheck(params).then(response => {
                this.getCheckVisible = false
                this.getList()// 重新获取表格数据
                this.$notify({title: '成功', message: '已审核拒绝', type: 'success', duration: 2000})
            }).catch(() => {
                this.getCheckVisible = false
                this.getList()
            })
        },
        //初始化表单数据，重新渲染
        initDataForm(){
            this.dataForm = {
                id: '' ,
                userId: '' ,
                cardId: '' ,
                createTime: '' ,
                amount: '' ,
                et: '' ,
                eu: '' ,
                applyState: '' ,
                remark: '' ,
            };
        },
        //关闭表单弹出框
        closeDialog() {
            this.$refs['dataForm'].resetFields();
            this.dialogFormVisible = false
        },
        // 重置按钮
        searchReset() {
            this.searchParam = {}
            this.pageRequest = {pageNum: 1, pageSize: 10}
            this.getList()
        },
    },
    created() {
        this.getList();
    },
}
</script>
